<template>
	<view class="container">
		  <view class="title">￥{{data.total}}</view>
		  <view style="margin-bottom: 20rpx;text-align: center;">总金额</view>
		  <view class="select-student">
			  <view class="title">选择学员</view>
			  <view class="student-info">
				  <view>{{data.studentInfo.name}}</view>
				   <view>{{data.studentInfo.age}}</view>
					<view class="operate">更换</view>
			  </view>
		  </view>
		  <view class="current-price">
			  <view style="color:#C0C4C1">现价</view>
			  <view>￥{{data.currentPrice}}</view>
		  </view>
		  <view class="num">
			  <view style="color:#C0C4C1">人数</view>
			  <view>x{{data.num}}</view>
		  </view>
		  <view class="total-price">
			  <view style="color:#C0C4C1">总金额</view>
			  <view>￥{{data.totalPrice}}</view>
		  </view>
		  <view class="total">
			  <view>总计</view>
			  <view  class="title" style="font-size: 32rpx;color:black;margin-top: 0;color:red">￥{{data.total}}</view>
		  </view>
		  <view class="pay-all">
			<button>全款支付￥{{data.total}}</button>
			</view>
		  <view class="deposit">
			  <button>定金支付￥{{data.deposit}}</button>
		  </view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				data:{
					studentInfo:{
						name:'张小伟',
						age:6
					},
					currentPrice:4780,
					num:1,
					totalPrice:4780,
					total:4780,
					fullAmount:23334,
					deposit:1000
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.container{
		padding: 30rpx;
		min-height: 100vh;
		background-color: white;
		.current-price,.num,.total-price,.total,{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx;
		}
		.deposit{
			width: 60%;
			margin: 20rpx auto;
			button{
				font-size: 32rpx;
				color:#007E51;
				border: 1px solid #007E51;
			  padding: 20rpx 30rpx;
			}
		}
		.pay-all{
			margin: 0 auto;
			margin-top: 100rpx;
			width: 60%;
			button{
				font-size: 32rpx;
				color:white;
				border:1px solid #007E51;
			background-color: #007E51;
				padding: 20rpx 30rpx;
			}
			
		}
		.title{
			margin-top: 70rpx;
			color: red;
			font-size: 50rpx;
			font-weight: 600;
			text-align: center;
		}
		.select-student{
			border: 1px solid;
			border-radius: 20rpx;
			padding: 20rpx;
			.title{
				margin-top: 20rpx;
				text-align: left;
				color: black;
				font-size: 33rpx;
				font-weight: 550;
				margin-bottom: 80rpx;
			}
			.student-info{
				display: flex;
				justify-content: space-around;
				align-items: center;
				.operate{
					color:#007E51;
					margin-bottom: 20rpx;
				}
			}
		}
	}
</style>